<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			function f1(){
				alert("你已经点击了按钮1")
			}
			function f3(){
				alert("你已经点击了按钮3")
			}
			$(function (){ //ready函数 文档数就绪之后执行
				$(".b4").click(function (){
					alert("你已经点击了按钮4")
				})
				$(".b5").bind("click",function(){
					alert("你已经点击了按钮5")
				})
			})
		</script>
	</head>
	<body>
		直接为HTML标签添加事件响应：
		<button type="button" class="b1" onclick="f1()">按钮1</button><br>
		为元素onclick属性添加事件响应：
		<button type="button" class="b2">按钮2</button><br>
		使用监听器监听元素的onclick事件：
		<button type="button" class="b3">按钮3</button><br>
		使用jQuery的click()方法实现事件响应：
		<button type="button" class="b4">按钮4</button><br>
		使用jQuery的bind()方法实现事件响应：
		<button type="button" class="b5">按钮5</button><br>
		<script type="text/javascript">
			document.getElementsByClassName("b2")[0].onclick= function() {
				alert("你已经点击了按钮2");
			}
			document.getElementsByClassName("b3")[0].addEventListener("click",f3)
		</script>
	</body>
</html>
